import React, { memo } from "react";
import { NavBar } from "react-vant";
import { useLocation, useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
const MyNavbar = memo(() => {
  let cars = useSelector((state) => state.shop.cars);
  let arr = [
    {
      key: "/home",
      title: "首页",
    },
    {
      key: "/about",
      title: "分类",
    },
    {
      key: "/my",
      title: "购物车",
    },
    {
      key: "/login",
      title: "登录",
    },
  ];
  let location = useLocation();

  let navigate = useNavigate();
  let item = arr.find((item) => location.pathname.includes(item.key));

  return (
    <div>
      {" "}
      <NavBar
        title={item.title}
        leftText=""
        onClickLeft={() => navigate(-1)}
        rightText={
          location.pathname.includes("/my")
            ? "已选" + cars.length + "件商品"
            : ""
        }
      />
    </div>
  );
});

export default MyNavbar;
